<template>
	<view class="">
		<!-- 带搜索的许多商品页，根据来时的页面确定顶部标题是什么 -->
		<tabsTop tabName="休闲零食"></tabsTop>
		<!-- 搜索框 -->
		<view class="search">
			<mySearch class="searchClick" @click="searchClick()" bgColor1="rgb(249,249,249)" bgColor2="#fff"></mySearch>
			<view class="title flex font-sm">
				<view :class="{'active': index == selectedIndex}" @click="titleClick(index)"
					v-for="(item,index) in sea_title" :key="index" class="py-3 px-3 flex align-center">
					{{item}}
					<!-- 排序 -->
					<view v-if="index==1" class="flex flex-column align-center ml-1">
						<uni-icons :color="up" type="top" size="10" style="margin-bottom: -8rpx;"></uni-icons>
						<uni-icons :color="down" type="bottom" size="10" style="margin-top: -10rpx;"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<!-- 许多商品 -->
		<view class="product-list px-3 pt-1  bg-light">
			<view class="sign_row flex flex-wrap justify-between">
				<!-- 循环生成两个商品数据 -->
				<view class="bg-white mb-3 rounded-lg overflow-hidden" v-for="(item,index) in product" :key="index"
					style="width: 330rpx">
					<view class="w-100" style="height: 350rpx;">
						
						<image :src="Domain_IMG+item.Picture_URL" :alt="item.name" class="img"></image>
					</view>
					<view class="px-2">
						<!-- 这行根据数据显示人气第几 -->
						<!-- <view class="product-name pt-2 font-sm"></view> -->
						<view class="flex justify-between py-3">
							<!-- 商品价格 -->
							<view class="flex align-center align-center">
								<!-- 价格组件都有问题 -->
								<view style="width: 28rpx; height: 28rpx;">
									<image :src="Domain_ICON+'/price.png'" mode="" class="img"></image>
								</view>
								<text style="color: green; font-size: 28rpx;line-height: 0;">￥{{item.specifications[0].Sales_Unit_Price}} </text>
							</view>
							<!-- 马上抢 -->
							<view>
								<button class="text-white rounded-circle font-sm"
									style="background-color: green;">马上抢</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 猜你喜欢 -->
		<view class="py-2 pl-3 font-lg font-weight-bold bg-hover-light">
			猜你喜欢
		</view>
		<!-- 猜你喜欢的商品 -->
		<view class="">
			<view class="product-list pl-3 pt-1  bg-light">
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
					<view class="sign_row flex flex-nowrap w-200">
						<!-- 循环生成两个商品数据 -->
						<view class="bg-white mb-3 mr-3 rounded-lg overflow-hidden" v-for="(item,index) in product.slice(4,10)"
							:key="index" style="width: 330rpx">
							<!-- 商品图片 -->
							<view class="w-100" style="height: 250rpx;">
								<image :src="Domain_IMG+item.Picture_URL" :alt="item.name" class="img"></image>
							</view>
							<view class="px-2">
								<!-- 商品名 -->
								<view class="product-name pt-2 font-sm text-ellipsis">{{item.Article_Name}}
								</view>
								<view class="flex justify-between py-3 mt-2">
									<!-- 商品价格 -->
									<view class="flex align-center align-center">
										<view style="width: 28rpx; height: 28rpx;">
											<image :src="Domain_ICON+'/price.png'" mode="" class="img"></image>
										</view>
										<text style="color: green; font-size: 38rpx;line-height: 0;">{{item.specifications[0].Sales_Unit_Price}}
										</text>
									</view>
									<!-- 购物车字体 -->
									<view style="width: 35rpx; height: 35rpx;">
										<image :src="Domain_ICON+'/shopcart.png'" mode="" class="img" style=""></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 底部赞助信息 -->
		<botSponsor bg-height="350rpx"></botSponsor>
		<!-- 底部tab栏组件 -->
		<tabsBottom :tabId="0"></tabsBottom>
	</view>
</template>

<script>
	const app = getApp();
	import tabsTop from "@/components/tabs/tabs-top.vue";
	import tabsBottom from "@/components/tabs/tabs-bottom.vue";
	import mySearch from "@/components/mysearch/mysearch.vue";
	import botSponsor from "@/components/botsponsor/sponsor.vue"
	import {
		getWXGoodsIdBlurred
	} from "@/api/global.js"
	export default {
		components: {
			tabsTop, //顶部标题组件
			tabsBottom, //底部tab组件
			mySearch, // 搜索组件
			botSponsor // 底部赞助商
		},
		data() {
			return {
				Domain_IMG: app.globalData.Domain_IMG,
				sea_title: ['综合', '价格', '上新'], //紧挨着搜索的标题
				up: "", // 价格
				down: '', // 价格
				selectedIndex: 0, // 当前选中的索引,默认第一个
				status: false,
				product: [
				// {
				// 		image: app.globalData.Domain_ICON + '/rice.webp',
				// 		name: '七色糙米2.5kg/袋*1',
				// 		price: 29.9
				// 	},
				// 	{
				// 		image: app.globalData.Domain_ICON + '/rice.webp',
				// 		name: '七色糙米2.5kg/袋*1',
				// 		price: 29.9
				// 	},
				// 	{
				// 		image: app.globalData.Domain_ICON + '/rice.webp',
				// 		name: '七色糙米2.5kg/袋*1',
				// 		price: 29.9
				// 	},
				// 	{
				// 		image: app.globalData.Domain_ICON + '/rice.webp',
				// 		name: '七色糙米2.5kg/袋*1',
				// 		price: 29.9
				// 	},
				// 	{
				// 		image: app.globalData.Domain_ICON + '/rice.webp',
				// 		name: '七色糙米2.5kg/袋*1',
				// 		price: 29.9
				// 	},
				],

			}
		},
		onLoad(option) {
			this.getWXGoodsIdBlurred(option.value)
		},
		methods: {
			async getWXGoodsIdBlurred(data) {
				console.log(data);
				var cs = {
					Article_Name: data,
					Enterprise_Info_SerialNumber: app.globalData.Enterprise_Info_SerialNumber,
					page: 1,
					limit: 8
				}
				
				var res=await getWXGoodsIdBlurred(cs);
				if(res){
					console.log(res);
					this.product=res.tableData;
			
				}
			},

			searchClick() {
				// 点击搜索进入搜索页
				uni.navigateTo({
					//搜索页路径
					url: "./search",
				});
			},
			titleClick(index) {
				this.selectedIndex = index
				if (index == 1) {
					if (!this.up && !this.down) {
						this.up = '#0f0'
					} else if (this.up && !this.down) {
						this.up = '',
							this.down = '#0f0'
					} else if (!this.up && this.down) {
						this.up = '#0f0'
						this.down = ''
					}
				} else {
					this.up = '';
					this.down = '';
				}
			}
		}
	}
</script>

<style lang="scss">
	.search {
		.title {
			justify-content: space-around;
		}
	}

	.active {
		color: green;
	}

	.scroll-view_H {
		white-space: nowrap;
		overflow: hidden;
	}
</style>